<!-- 面包屑导航 -->
<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <i class="el-icon-d-arrow-left" @click="emitFn"></i>
      &nbsp;
      <el-breadcrumb-item
        :to="{ path: item.path }"
        v-for="item in breadArr"
        :key="item.title"
        >{{ item.title }}</el-breadcrumb-item
      >
    </el-breadcrumb>
  </div>
</template>

<script>
//这里可以导入其他文件
import eventBus from '../utile/eventBus'
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data () {
    //这里存放数据
    return {
      isCollapse: true,
      breadArr: []           //面包屑菜单
    };
  },
  created () {
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
    $route: {
      handler (val) {
        this.breadArr = []      //push前先清空数组,避免添加多余的数据
        val.matched.forEach((item, index) => {
          //   console.log(item);
          if (index > 0) {
            this.breadArr.push({
              title: item.meta.title,   //当前title
              path: item.path       //当前路由
            })
          }
        })
        console.log(this.breadArr);
      },
      immediate: true       //页面打开先获取一次数据
    },
  },
  //方法集合
  methods: {
    emitFn () {
      this.isCollapse = !this.isCollapse
      eventBus.$emit('tran', this.isCollapse)
      //   console.log(this.isCollapse);
    }
  },
}
</script>
<style  scoped>
i {
  float: left;
  font-size: 20px;
}
</style>